<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>考试管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="40" label-position="left" :model="search">
      <Button type="success" style="margin-right: 30px" @click="addModal = true">添加</Button>
      <FormItem label="标题">
        <Input type="text" v-model="search.name" placeholder="请输入考试标题检索"/>
      </FormItem>
      <FormItem label="状态">
        <Select v-model="search.status" clearable>
          <Option :value="0">未发布</Option>
          <Option :value="1">已发布</Option>
          <Option :value="2">已结束</Option>
        </Select>
      </FormItem>
      <FormItem label="科目" v-if="subjectTreeData.length">
        <Select v-model="search.subject.parentId" clearable>
          <Option v-for="subject in subjectTreeData[0].children" :value="subject.id" :key="subject.id">{{ subject.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="课程">
        <Select v-model="search.subjectId" clearable>
          <Option v-for="subject in subjectDate" :value="subject.id" :key="subject.id">{{ subject.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="年级" v-if="gradeTreeData.length">
        <Select v-model="search.gradeClass.parentId" clearable>
          <Option v-for="grade in gradeTreeData[0].children" :value="grade.id" :key="grade.id">{{ grade.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="班级">
        <Select v-model="search.gradeClassId" clearable>
          <Option v-for="grade in gradeData" :value="grade.id" :key="grade.id">{{ grade.name }}</Option>
        </Select>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <Table stripe row-key="id" :columns="columns" :data="data"></Table>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{marginTop: '20px'}" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
    <Modal
        v-model="modalShow"
        :title="addModal ? '添加考试' : editModal ? '修改考试' : '' + '灵异考试'"
        cancel-text="取消"
        class-name="center-modal"
        @on-visible-change="modalChange">
      <Form :model="form" :label-width="80" ref="modalForm" :rules="rules">
        <FormItem label="考试标题" prop="name">
          <Input v-model="form.name" placeholder="请输入考试标题"/>
        </FormItem>
        <FormItem label="科目课程" prop="subjectName">
          <input v-model="form.subjectName" placeholder="请选择科目课程(满分100，系统根据课程下试题数量自动算分)" readonly @click="subjectTree = true; treeData = {};" class="ivu-input ivu-input-default"/>
          <input v-model="form.subjectId" type="hidden"/>
        </FormItem>
        <FormItem label="开始时间" prop="startTime">
          <DatePicker type="datetime" v-model="form.startTime" placeholder="请选择开始时间" style="width: 100%"/>
        </FormItem>
        <FormItem label="时长" prop="duration">
          <Input v-model="form.duration" format="yyyy-MM-dd HH:mm:ss" type="number" maxlength="4" placeholder="请输入时长(分钟)"/>
        </FormItem>
        <FormItem label="考试班级" prop="gradeClassName">
          <input v-model="form.gradeClassName" placeholder="请输入科目课程" readonly @click="gradeTree = true; treeData = {};" class="ivu-input ivu-input-default"/>
          <input v-model="form.gradeClassId" type="hidden"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="submit">{{ addModal ? '添加' : editModal ? '修改' : '' + '灵异' }}</Button>
      </div>
    </Modal>
    <Modal
        v-model="subjectTree"
        title="树形菜单"
        cancel-text="取消"
        class-name="center-modal"
        :z-index="99999"
        @on-cancel="subjectTree = false">
      <Tree :data="subjectTreeData" @on-select-change="subjectTreeSelectChange"></Tree>
      <div slot="footer">
        <Button type="primary" size="large" @click="subjectTreeOkClick">确定</Button>
      </div>
    </Modal>
    <Modal
        v-model="gradeTree"
        title="树形菜单"
        cancel-text="取消"
        class-name="center-modal"
        :z-index="99999"
        @on-cancel="gradeTree = false">
      <Tree :data="gradeTreeData" @on-select-change="gradeTreeSelectChange"></Tree>
      <div slot="footer">
        <Button type="primary" size="large" @click="gradeTreeOkClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'TestPaper',
  data: function () {
    return {
      columns: [
        {
          type: 'index'
        },
        {
          title: '考试标题',
          key: 'name'
        },
        {
          title: '开始时间',
          key: 'startTime'
        },
        {
          title: '时长',
          key: 'duration'
        },
        {
          title: '科目课程',
          render: (h, params) => h('div', {}, params.row.subject.parentName + ' ' + params.row.subject.name)
        },
        {
          title: '班级',
          render: (h, params) => h('div', {}, params.row.gradeClass.gradeName + ' ' + params.row.gradeClass.name)
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '260px',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small',
                  disabled: params.row.status !== 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.form = { ...params.row }
                    this.form.subjectName = params.row.subject.parentName + ' ' + params.row.subject.name
                    this.form.gradeClassName = params.row.gradeClass.gradeName + ' ' + params.row.gradeClass.name
                    this.editModal = true
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                  disabled: params.row.status !== 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '删除提示',
                      content: '是否确认删除?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        this.$http.delete(`papers?id=${params.row.id}`).then(res => {
                          if (res.code === 200) {
                            this.getData()
                            this.$Message.success(res.msg)
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small',
                  disabled: params.row.status !== 1
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '发布提示',
                      content: '发布后将无法进行修改及删除操作，确认发布?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        this.$http.get(`paper/release?id=${params.row.id}`).then(res => {
                          if (res.code === 200) {
                            this.getData()
                            this.$Message.success(res.msg)
                          }
                        })
                      }
                    })
                  }
                }
              }, '发布')
            ])
          }
        }
      ],
      data: [],
      addModal: false,
      editModal: false,
      form: {},
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '考试标题不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '考试标题长度在1-50位之间',
            trigger: 'blur'
          }
        ],
        subjectName: [
          {
            required: true,
            type: 'string',
            message: '科目课程不能为空',
            trigger: 'blur'
          },
        ],
        startTime: [
          {
            required: false,
            type: 'date',
            message: '开始时间不能为空',
            trigger: 'change'
          }
        ],
        duration: [
          {
            required: true,
            type: 'string',
            message: '考试时长不能为空',
            trigger: 'blur',
            transform(v){
              return  v ? v + "" : ""
            }
          },
          {
            min: 1,
            max: 4,
            message: '请输入一个正确的考试时长',
            trigger: 'blur'
          }
        ],
        gradeClassName: [
          {
            required: true,
            type: 'string',
            message: '班级不能为空',
            trigger: 'blur'
          }
        ]
      },
      total: 0,
      current: 1,
      pageSize: 10,
      search: {
        subject: {},
        gradeClass: {}
      },
      subjectTree: false,
      gradeTree: false,
      subjectTreeData: [],
      gradeTreeData: [],
      treeData: {}
    }
  },
  mounted () {
    this.getData()
    this.$http.get('subject/tree').then(res => {
      if (res.code === 200) {
        this.subjectTreeData = res.data.tree
      }
    })
    this.$http.get('grade/tree').then(res => {
      if (res.code === 200) {
        this.gradeTreeData = res.data.tree
      }
    })
  },
  computed: {
    modalShow: {
      get () {
        return this.addModal || this.editModal
      },
      set () {
        this.addModal = this.editModal = false
      }
    },
    subjectDate() {
      if(this.search.subject.parentId != null && this.search.subject.parentId !== '') {
        return this.subjectTreeData[0].children.filter(v => v.id === this.search.subject.parentId)[0].children
      }
      return []
    },
    gradeData() {
      if(this.search.gradeClass.parentId != null && this.search.gradeClass.parentId !== '') {
        return this.gradeTreeData[0].children.filter(v => v.id === this.search.gradeClass.parentId)[0].children
      }
      return []
    }
  },
  methods: {
    getData () {
      this.$http.post(`paper/get?pageNo=${this.current}&pageSize=${this.pageSize}`, this.search).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    modalChange (v) {
      if (!v) {
        this.$refs.modalForm.resetFields()
        this.form = {}
      }
    },
    submit () {
      this.$refs.modalForm.validate((v) => {
        if (v) {
          this.form.startTime =  this.$moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss')
          console.log(this.form.startTime)
          if (this.addModal) {
            this.$http.post('papers', this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.addModal = false
              }
            })
          }
          if (this.editModal) {
            this.$http.put('papers', this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.editModal = false
              }
            })
          }
        }
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    },
    subjectTreeSelectChange (arr, obj) {
      this.treeData.id = obj.id
      this.treeData.name = obj.name
      this.treeData.parentName = obj.parentName
    },
    subjectTreeOkClick () {
      if(this.treeData.id !== undefined) {
        this.form.subjectId = this.treeData.id
        this.form.subjectName = this.treeData.parentName + ' ' + this.treeData.name
        this.subjectTree = false
      }
    },
    gradeTreeSelectChange (arr, obj) {
      this.treeData.id = obj.id
      this.treeData.name = obj.name
      this.treeData.parentName = obj.parentName
    },
    gradeTreeOkClick () {
      if(this.treeData.id !== undefined) {
        this.form.gradeClassId = this.treeData.id
        this.form.gradeClassName = this.treeData.parentName + ' ' + this.treeData.name
        this.gradeTree = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
</style>
